<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
      backgroundColor: '#041A49',
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          radius: 55,
          min: 0,
          max: 100,
          axisLine: {
            lineStyle: {
              width: 15,
              opacity: 0.1,
              // 由于不知道圆环的底色(取色器一直量不准确)，导致整体颜色还原有一定偏差
            }
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0.5, color: 'rgba(1,66,178,0.2)'
              }, {
                offset: 0, color: 'rgba(0,255,229,1)'
              }],
            },
            shadowColor: 'rgba(0, 255, 229, 0.5)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          progress: {
            show: true,
            width: 15,
          },
          detail: {
            fontSize: 10,
            offsetCenter: [0, -5],
            color: 'rgba(57, 193, 91, 1)',
            opacity: 1,
            formatter: function (value) {
              return value + '%';
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: 5,
            width: 5,
            offsetCenter: [15, -3],
            itemStyle: {
              color: 'rgba(57, 193, 91, 1)',
              opacity: 1,
            }
          },
          data: [
            {
              value: 50
            }
          ]
        }
      ]
    };
    // SET
    myChart.setOption(option);
  </script>
</body>
</html>